<template>
	<view class="content">
		<view class="example-con">总页数：{{page.total}}，当前第{{page.currentPage}}页</view>
		<view class="example-btn">
			<view @click="changeTotal">更改总页数555条</view>
			<view style="margin-left: 50px;" @click="changeCurrentPage">更改到第3页</view>
		</view>

		<view class="title">默认</view>
		<page-pagination :total="page.total" :pageSize="page.pageSize" :currentPage="page.currentPage"
			@change="change"></page-pagination>

		<view class="title">简单模式（mode="simple"）</view>
		<page-pagination :total="page.total" mode="simple"></page-pagination>

		<view class="title">无边框（showBorder="false"）</view>
		<page-pagination :total="page.total" :currentPage="page.currentPage" :showBorder="false"></page-pagination>

		<view class="title">使用汉字表示(btnText)及显示省略号(forceEllipses)</view>
		<page-pagination :total="page.total" :btnText="true" :forceEllipses="true"></page-pagination>

		<view class="title">保留页码中的第一页和最后一页(numAround)</view>
		<page-pagination :total="page.total" :numAround="true" :showBorder="false"></page-pagination>


		<view class="title">附加功能(总条数、每页条数 及 页码跳转)(layout)</view>
		<page-pagination :total="page.total" layout="total,first,prev,page,next,last,limit,jumper"></page-pagination>


		<view class="title">附加功能自定义显示分页项及排列顺序 和<br>自定义每页显示个数选择器的选项设置(pageSizes)</view>
		<page-pagination class="test-pagination" :numAround="true" :total="page.total" layout="page,prev,next,limit,total"
			:pageSizes="[10,50,60,100]" @sizeChange="sizeChange">
		</page-pagination>

		<view class="title">自定义显示分页信息</view>
		<page-pagination :total="page.total" :pageSize="page.pageSize" :showBorder="false" :numAround="true">
			<view style="display: block;">total：{{page.total}}，pageSize：{{page.pageSize}}</view>
		</page-pagination>

		<view class="title">大号按钮(size="large")</view>
		<page-pagination :total="page.total" :showBorder="false" :showPageSize="4" size="large"></page-pagination>

		<view class="title">小型按钮(size="small")</view>
		<page-pagination :total="page.total" :showBorder="false" :showPageSize="6" size="small"></page-pagination>


		<view class="title">自定义颜色(color="#F56C6C")</view>
		<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#F56C6C"></page-pagination>
		<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#67C23A"></page-pagination>
		<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#FF00E3"></page-pagination>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					total: 10000,
					pageSize: 50,
					currentPage: 2
				}
			}
		},
		onLoad() {},
		methods: {
			change(currentPage, type) { // 当前页改变
				this.page.currentPage = currentPage;
				console.log("点击了" + type + "，当前页：" + currentPage);
			},
			sizeChange(pageSize) { // 每页条数改变
				this.page.pageSize = pageSize;
				console.log("每页", pageSize, "条");
			},
			changeTotal() { // 更改总条数
				this.page.total = 555
			},
			changeCurrentPage() { // 更改当前页
				this.page.currentPage = 3
			}
		}
	}
</script>

<style>
	.content {
		padding-bottom: 50px;
	}

	.title {
		font-size: 14px;
		line-height: 16px;
		padding: 22px 15px 9px;
		color: rgba(69, 90, 100, 0.6);
	}

	.example-con {
		padding: 10px 20px;
	}

	.example-btn {
		padding-left: 20px;
		color: #66B1FF;
		font-size: 14px;
		text-decoration: underline;
		display: flex;
	}

	::v-deep.test-pagination .page-con .page-scroll .page-scroll-child .pag-btn.prev {
		margin-left: 10px;
	}
</style>